<template>
  <div>
    <h3>我的首页</h3>
    <div class="main">内容1</div>
    <!-- id锚点 -->
    <div id="aaa">我是主要内容</div>
    <div class="main">内容2</div>
  </div>
</template>

<script>
export default {
  // 组件进入守卫
  beforeRouteEnter(to, from) {
    console.log('组件内守卫 -- beforeRouteEnter')
  },
  // 切换到不同的路由才触发，如果是动态路由切换它不会触发
  beforeRouteLeave(to, from) {
    console.log('组件内守卫 -- beforeRouteLeave')
  }
}
</script>

<style lang="scss" scoped>
.main {
  height: 3000px;
  background-color: palevioletred;
}
</style>
